<template>
    <el-drawer size='50%'
               ref='addWarehouseDrawer'
               title='管理仓库'
               :visible.sync='addWarehouseVisible'
               :direction='direction'
               :before-close='handleClose'>
        <div>
            <div class='container'>
                <!--搜索框-->
                <div class='handle-box'>
                    <el-input v-model='query.warehouseCode' placeholder='请输入仓库号' class='handle-input mr10'
                              style='width: 150px'
                              prefix-icon='el-icon-search'></el-input>
                    <el-button type='primary' icon='el-icon-search' @click='handleSearch'>搜索</el-button>
                    <el-button type='primary' icon='el-icon-refresh-left' @click='resetSearch'>重置</el-button>
                </div>

                <!--tab页-->
                <el-tabs v-model='tabValue' type='card' @tab-click='handleTabClick'>
                    <el-tab-pane label='管理仓库' name='managerWarehouse'></el-tab-pane>
                    <el-tab-pane label='添加仓库' name='addWarehouse'></el-tab-pane>
                </el-tabs>

                <!--表格体-->
                <el-table
                    :data='tableData'
                    style='width: 100%;
                    margin-bottom: 20px;'
                    row-key='id'
                    border
                    default-expand-all
                    @selection-change='handleSelectionChange'
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column type='selection' width='55' align='center'></el-table-column>
                    <el-table-column type='index' width='55' label='序号' align='center'></el-table-column>
                    <el-table-column v-if='false'
                                     prop='productWarehouseId'
                                     label='商品仓库绑定ID'>
                    </el-table-column>
                    <el-table-column v-if='false'
                                     prop='productId'
                                     label='仓库ID'>
                    </el-table-column>

                    <el-table-column v-if='false'
                                     prop='warehouseId'
                                     label='仓库ID'>
                    </el-table-column>

                    <el-table-column
                        v-if="tabValue!='addWarehouse'"
                        prop='status'
                        align='center'
                        width='185'
                        label='状态'>
                        <template slot-scope='scope' v-if="tabValue!='addWarehouse'">
                            <el-switch
                                v-model='scope.row.status'
                                @change='handleSwitch(scope.row)'
                                active-text='启用'
                                inactive-text='停用'>
                            </el-switch>
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop='warehouseCode'
                        label='仓库编码'
                        align='center'
                        sortable>
                    </el-table-column>

                    <el-table-column
                        prop='warehouseName'
                        label='仓库名称'
                        align='center'
                        sortable>
                    </el-table-column>
                    <el-table-column
                        v-if="tabValue!='addWarehouse'"
                        prop='stock'
                        label='库存数'
                        sortable
                        align='center'>
                    </el-table-column>
                    <!--工具栏-->
                    <el-table-column label='操作' align='center'>
                        <template slot-scope='scope'>
                            <el-button
                                v-if="tabValue=='addWarehouse'&&scope.row.id!=0"
                                type='text'
                                @click='handleBindWarehouse(scope.$index, scope.row)'
                            >绑定
                            </el-button>
                            <el-button
                                v-if="tabValue!='addWarehouse'&&scope.row.id!=0"
                                type='text'
                                icon='el-icon-truck'
                                class='yellow'
                                @click='changeBindWarehouseStock(scope.$index, scope.row)'
                            >调整库存
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页-->
                <div class='pagination'>
                    <el-pagination
                        background
                        layout='total, prev, pager, next'
                        :current-page='query.pageIndex'
                        :page-size='query.pageSize'
                        :total='pageTotal'
                        @current-change='handlePageChange'
                    ></el-pagination>
                </div>
            </div>
        </div>
        <el-drawer
            title='调整库存'
            :append-to-body='true'
            :before-close='handleInnerClose'
            :visible.sync='innerDrawer'>
            <!--内部抽屉表单-->
            <div class="demo-drawer__content" >
                <el-form :model='changeStockForm' ref='changeStockForm' :rules='changeStockRule'>
                    <el-form-item label="商品库存关系ID" :label-width="80" prop='productWarehouseId' v-if='false'>
                        <el-input v-model='changeStockForm.productWarehouseId'  type='text'  autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="库存数" :label-width="80" prop='stock'>
                        <el-input v-model='changeStockForm.stock' type='number' autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer">
                    <el-button @click='innerDrawer = false'>取 消</el-button>
                    <el-button type='primary' @click="saveChangeStock('changeStockForm')">确 定</el-button>
                   </div>
            </div>
        </el-drawer>
    </el-drawer>
</template>

<script>
import global from '../common/Global';

export default {
    name: 'addWarehouse',
    data() {
        const validatorNum = (rule, value, callback) => {
            if (!value) {
                callback();
            } else if (!/^(([0-9]+)|([0-9]+\.[0-9]{0,2}))$/.test(value)) {
                callback(new Error('请输入正却数量，小数最多保留两位'));
            } else {
                callback();
            }
        };
        return {
            //仓库调整表单验证
            changeStockRule: {
                stock: [{ required: true, message: '请输入库存数', trigger: 'change' },
                    { validator: validatorNum, trigger: 'blur' }]
            },
            innerDrawer: false,
            addWarehouseVisible: false,
            direction: 'rtl',//右侧弹出
            tableData: [],
            multipleSelection: [],//多选值
            query: {
                productId: '',
                warehouseCode: '',
                pageIndex: 1,
                pageSize: 10
            },
            pageTotal: 0,//分页总数
            BASIC_SERVER: global.BASIC_SERVER,//请求服务名
            tabValue: 'managerWarehouse',//选项卡选项
            changeStockForm: {//调整库存表单
                productWarehouseId: '',
                stock: ''
            }
        };
    },
    methods: {
        //初始化表单
        init(productId) {
            console.log(productId);
            if(this.query.productId!=productId){
                //初始化清搜索框
                this.query.warehouseCode = '';
            }
            this.query.productId = productId;
            //判断TABLE事件
            if (this.tabValue == 'managerWarehouse') {
                this.$http.post(this.BASIC_SERVER + '/warehouseController/selectPageBindWarehouse.json', this.query).then(res => {
                    if (res.data.status) {
                        const data = new Array();
                        for (const dataKey of res.data.data.records) {
                            if (dataKey['status'] === '1') {
                                dataKey['status'] = true;
                            } else {
                                dataKey['status'] = false;
                            }
                            data.push(dataKey);
                        }
                        this.tableData = data;//数据
                        this.pageTotal = res.data.data.total;//总数
                        this.addWarehouseVisible = true;
                    }
                });
            } else {
                this.$http.post(this.BASIC_SERVER + '/warehouseController/selectPageWarehouse.json', this.query).then(res => {
                    if (res.data.status) {
                        const data = new Array();
                        for (const dataKey of res.data.data.records) {
                            if (dataKey['status'] === '1') {
                                dataKey['status'] = true;
                            } else {
                                dataKey['status'] = false;
                            }
                            data.push(dataKey);
                        }
                        this.tableData = data;//数据
                        this.pageTotal = res.data.data.total;//总数
                        this.addWarehouseVisible = true;
                    }
                });
            }
        },
        //绑定仓库
        handleBindWarehouse(scope, row) {
            const body = new Object();
            body.productId = row.productId;
            body.warehouseId = row.warehouseId;
            this.$http.post(this.BASIC_SERVER + '/warehouseController/bindProductWarehouse.json', body).then(res => {
                if (res.data.status) {
                    this.$message.success(res.data.msg);
                    this.tableData = res.data.data;
                    this.init(row.productId);
                }
            });
        },
        //修改库存点击事件
        changeBindWarehouseStock(scope, row) {
            this.innerDrawer = true;
            this.changeStockForm.stock = row.stock;
            this.changeStockForm.productWarehouseId = row.productWarehouseId;
        },
        //保存库存编辑
        saveChangeStock(changeStockForm) {
            this.$refs[changeStockForm].validate((valid) => {
                if (valid) {
                    this.$http.post(this.BASIC_SERVER + '/warehouseController/updateProductWarehouse.json', this.changeStockForm).then(res => {
                        if (res.data.status) {
                            this.$message.success(res.data.msg);
                            this.innerDrawer=false;
                            this.init(this.query.productId);
                        }
                    });
                }
            });
        },
        //关闭外部抽屉
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                    //调用父组件，刷新页面
                    this.$emit('get-data', null);
                })
                .catch(_ => {
                });
        },
        //搜索
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);//重置为首页
            this.init(this.query.productId);//重新请求赋值
        },
        // 触发重置按钮
        resetSearch() {
            this.query.warehouseCode = '';
            this.$set(this.query, 'pageIndex', 1);//重置为首页
            this.init(this.query.productId);//重新请求赋值
        },
        //绑定关系停启用
        handleSwitch(row){
            const body=new Object();
            let flag=0;
            body.productWarehouseId=row.productWarehouseId
            if(row.status){
                flag=1;
            }
            body.status=flag;
            this.$http.post(this.BASIC_SERVER + '/warehouseController/changeProductWarehouseBindRel.json', body).then(res => {
                if (res.data.status) {
                    this.$message.success(res.data.msg);
                    this.init(this.query.productId);
                }
            });
        },
        //内部抽屉关闭
        handleInnerClose(done) {
            this.$confirm('还有未保存的工作哦确定关闭吗？')
                .then(_ => {
                    done();
                })
                .catch(_ => {
                });
        },
        //TAB页点击触发
        handleTabClick(tab, event) {
            this.tabValue = tab.name;
            this.init(this.query.productId);
        },
        //选中事件
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 分页导航
        handlePageChange(val) {
            console.log(val);
            this.$set(this.query, 'pageIndex', val);
            this.init(this.query.productId);
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.yellow {
    color: #E6A23C;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.upload-demo {
    /*margin-left: 100px;*/
}
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.yellow{
    color: #E6A23C;
}

.mr10 {
    margin-right: 10px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
